<template>
    <div>
        <button @click="addNum">添加数字</button>
        <button @click="deleteNum">删除数字</button>
        <button @click="shuffleNum">数字洗牌</button>

        <transition-group tag="p" name="yzh">
            <span v-for="item in numList" :key="item" class="item">
                {{item}}
            </span>
        </transition-group>
        
    </div>
</template>
<script>
import _ from 'lodash'
export default {
    name: '',
    data() {
       return {
           numList: [0,1,2,3,4,5,6,7,8,9],
           numCounter: 10
       }
    },
    created() {},
    methods: {
        redomIndex() {
            return Math.floor(Math.random() * this.numList.length);
        },
        addNum() {
            // this.numList.push(this.numCounter)

            //随机任意位置添加
            this.numList.splice(this.redomIndex(), 0, this.numCounter++)
        },
        deleteNum() {
            this.numList.splice(this.redomIndex(), 1)
        },
        shuffleNum() {
            this.numList = _.shuffle(this.numList)
        }
    },
}
</script>
<style>
.item {
    margin-right: 10px;
    display: inline-block;
}

.yzh-enter-from,
.yzh-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
.yzh-enter-active,
.yzh-leave-active {
    transition: all 1s ease;
}

/* 数字平移动画 */
.yzh-move {
    transition: transform 1s ease;
}
/* 删除时把 数字脱离文档流让出位置 后面数字就会起到动画 */
.yzh-leave-active {
    position: absolute;
}
</style>
